﻿input.text, input.button, textarea, .text-active {
    font-family: "Segoe UI", Verdana, Sans-Serif;
    border: 1px solid #ababab;
    margin: 0.1em;
    border-radius: 2px;
}
input.button {
    background: white;
    padding: 3px 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
input.button:hover, input.text:hover, textarea:hover {
    border-color: #909090;
}
input.button:active {
    position: relative;
    left: 0; top: 1px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset, 0 0 0 10em rgba(0, 0, 0, 0.05) inset;
    padding: 3px 13px 3px 13px;
}
input.text, textarea, .text-active {
    padding: 3px;
}
textarea.text {
    overflow: auto;
}
.text-active {
    border-color: #909090;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    position: relative;
    left: 0; bottom: 1px;
    outline: none;
}
.hint-message {
    background: white;
    padding: 0.8em;
    font-size: 0.8em;
    border: 2px solid black;
    box-shadow: 1px 1px 4px #444;
}
form.action-button input[type=submit] {
    border: 0;
    padding: 0;
    margin: 0;
    background: inherit;
    box-shadow: 0 0 0 0;
    cursor: pointer;
}
form.action-button input[type=submit]:active {
    border: 0;
    padding: 0;
    margin: 0;
    background: inherit;
    box-shadow: 0 0 0 0;
}

/** Extra form widths **/
div.half-width input.text,
div.half-width input.text-active,
div.half-width textarea { width: 80%; max-width: 100%; }